import React from 'react';
import { Image } from 'antd';
import _ from 'lodash';

import icon1 from '@/assets/datang/icon1.png';
// import icon2 from '@/assets/datang/icon2.png';
// import icon3 from '@/assets/datang/icon3.png';
import styles from './index.less';

export default ({ data, onClose = () => {} }) => {
  const _listItem = (item) => {
    return (
      <div>
        <div className={styles.label}>
          <img src={item.icon} />
          <span>{item.name}</span>
        </div>
        <div className={styles.value}>
          {item.value}
          <span className={styles.unit}>{item.unit}</span>
        </div>
      </div>
    );
  };

  return (
    <div className={styles.tooltip}>
      <div className={styles.title}>
        <span>{data.name}</span>
        <span className={styles.close} onClick={onClose}>
          ×
        </span>
      </div>
      <div className={styles.cont}>
        <div className={styles.desc}>{data.introduction}</div>
        <div className={styles.list}>
          {data.inscap &&
            _listItem({
              name: '装机容量',
              unit: '万千瓦',
              icon: icon1,
              value: data.inscap,
            })}
          {/* {_listItem({
            name: '日发电量',
            unit: '万千瓦时',
            icon: icon2,
            value: null,
          })}
          {_listItem({
            name: '月计划完成情况',
            unit: '万千瓦时',
            icon: icon3,
            value: null,
          })} */}
        </div>
        <div className={styles.pic}>
          <Image
            width={'100%'}
            height={180}
            src={data?.imgUrl || 'error'}
            preview={false}
            fallback=""
          />
        </div>
      </div>
    </div>
  );
};
